<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工作牛登录页面</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6样式表 -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
    <!-- Font Awesome 字体图标库 -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/font-awesome.min.css">
    <!-- 登录页面样式表 -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/login.css">
    <!-- jQuery 2.2.0 -->
    <script src="/javascripts/jQuery-2.2.0.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="/javascripts/bootstrap.min.js"></script>
</head>
<body>
<!-- 登录页面开始 -->
<div class="login_container">
    <div class="login_bg">
        <img src="/images/background-img.png" alt="登录页面背景"/>
    </div>
    <div class="login_title">
        <span>工作牛后台服务系统</span>
    </div>
    <div class="window_container">
        <ul>
            <li><span>用户登录</span></li>
            <li><input id='username' class="input_box" type="text" placeholder="请输入用户名"/></li>
            <li><input id='password' class="input_box" type="password" placeholder="请输入密码"/></li>
            <li>
                <ul>
                    <li><input id="code" class="input_box input_code" type="text" placeholder="请输入右侧验证码"/></li>
                    <li><span><%= validCode %></span></li>
                </ul>
            </li>
            <li><button type="button" class="btn_login" onclick="login()">登录</button></li>
        </ul>

    </div>

</div>
<!-- 登录页面结束 -->
<script type="text/javascript">
    function login() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        var code = document.getElementById('code');

        if(username.value === null || username.value === undefined || username.value.length === 0) {
            alert('用户名不能为空');
            return;
        }
        if(password.value === null || password.value === undefined || password.value.length === 0) {
            alert('密码不能为空');
            return;
        }
        if(code.value === null || code.value === undefined || code.value.length === 0) {
            alert('验证码不能为空');
            return;
        }
        $.ajax({
            //提交数据的类型 POST GET
            type:"POST",
            //提交的网址
            url:"/login",
            //提交的数据
            data:{user_name:username.value, password:password.value, code:code.value},
            //返回数据的格式
            datatype: "json",
            //成功返回之后调用的函数
            success:function(data){
                var res = JSON.parse(data.response);
                if (res.code >= 1000) {
                    if (res.code === 1001) {
                        window.location.href = '/error?message=' + res.message;//跳转错误页面
                    } else {
                        alert(res.message);
                    }
                }
                else {
                    window.location.href = '/enquiry?name=' + res.data.name + '&user_id=' + res.data.user_id; //带上参数
                }
            } ,
            //调用执行后调用的函数
            complete: function(XMLHttpRequest, textStatus){

            },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
                window.location.href = '/error';
            }
        });
    }
</script>
</body>
</html>













